import { createStore } from 'vuex'
import { useDark, useToggle } from '@vueuse/core'

export default createStore({
  state: {  //Vuex的状态，实际上就是存数据的地方
    layout: {
      /* 全局 */
      layoutMode: window.localStorage.getItem("layoutMode")!=null ? window.localStorage.getItem("layoutMode") : 'Default',  // 后台布局方式，可选值<Default|Classic|Streamline|Double>
      isDark: window.localStorage.getItem("layoutMode")!=null ? (window.localStorage.getItem("layoutMode")==="true") : false,  // 是否暗黑模式

      /* 侧边菜单 */
      menuShowTopBar: window.localStorage.getItem("menuShowTopBar")!=null ? (window.localStorage.getItem("menuShowTopBar")==="true") : true,   // 显示菜单栏顶栏(LOGO)
    },
  },
  getters: {  //提供获取Vux状态的方式, 注意在组件中调用时getPerson是以属性的方式被访问
    getLayout(state){
      return state.layout
    }
  },
  mutations: {  //提供直接操作Vuex的方法，注意mutations里的方法中不能有任何异步操做
    setLayoutMode(state, value){
      //第一个参数state为Vuex状态；第二个参数为commit函数传来的值
      state.layout.layoutMode = value

      window.localStorage.setItem("layoutMode",value)
    },
    setMenuShowTopBar(state, value){
      //第一个参数state为Vuex状态；第二个参数为commit函数传来的值
      state.layout.menuShowTopBar = value

      window.localStorage.setItem("menuShowTopBar",value.toString())
    },
    setDark(state, value){
      //第一个参数state为Vuex状态；第二个参数为commit函数传来的值
      state.layout.isDark = value

      window.localStorage.setItem("isDark",value.toString())

      // const isDark = useDark()
      // const toggleDark = useToggle(isDark)
    }
  },
  actions: {  //提供通过mutations方法来简介操作Vuex的方法
    setLayoutMode(context, value){
      //第一个参数context为上下文，提供一些方法；第二个参数为dispatch函数传来的值
      context.commit('setLayoutMode', value)
    },
    setMenuShowTopBar(context, value){
      //第一个参数context为上下文，提供一些方法；第二个参数为dispatch函数传来的值
      context.commit('setMenuShowTopBar', value)
    },
    setDark(context, value){
      //第一个参数context为上下文，提供一些方法；第二个参数为dispatch函数传来的值
      context.commit('setDark', value)
    }
  },
  modules: {
  }
})
